<template>

  <div>
    <el-form ref="form"  label-width="80px" inline>
      <el-form-item label="膳食名称">
        <el-input v-model="queryParam.foodname" placeholder="请输膳食名称" ></el-input>
      </el-form-item>
      <el-form-item label="供应星期">
        <el-input v-model="queryParam.supplyDate" placeholder="请输入供应星期" ></el-input>
      </el-form-item>
      <el-form-item  >
        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
      </el-form-item>
    </el-form>


    <el-button type="primary" @click="dialogFormVisible=true" >添加</el-button>




    <el-table :data="tableData" size="mini" style="width: 100%" v-loading="loading">
      <el-table-column prop="foodId" label="膳食id" align="center" width="180"></el-table-column>
      <el-table-column prop="foodname" label="膳食名称" align="center"></el-table-column>
      <el-table-column prop="foodtype" label="膳食类别" align="center"></el-table-column>
      <el-table-column prop="foodlabel" label="膳食标签" align="center"></el-table-column>
      <el-table-column prop="foodprice" label="膳食价格" align="center"></el-table-column>
      <el-table-column prop="isMuslim" label="是否清真" align="center"></el-table-column>
      <el-table-column prop="supplyDate" label="供应星期" align="center"></el-table-column>
      <el-table-column prop="supplyType" label="供应类型" align="center"></el-table-column>
      <el-table-column prop="foodpic" label="图片" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-button type="primary" size="mini" @click="toEdit(scope.row.foodId)">修改</el-button>
          <el-button type="warning" size="mini" @click="deleteById(scope.row.foodId)">删除</el-button>

        </template>

      </el-table-column>

    </el-table>

    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
          @size-change="queryList"
          @current-change="queryList"
          :current-page.sync="queryParam.current"
          :page-size.sync="queryParam.size"
          :page-sizes="[5,10,15,20,50]"
          layout="total,sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>


    <el-dialog title="添加膳食" :visible.sync="dialogFormVisible" v-if="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="膳食名称">
          <el-input v-model="form.foodname" ></el-input>
        </el-form-item>
        <el-form-item label="膳食类别">
          <el-input v-model="form.foodtype" ></el-input>
        </el-form-item>
        <el-form-item label="膳食标签">
          <el-input v-model="form.foodlabel" ></el-input>
        </el-form-item>
        <el-form-item label="膳食价格">
          <el-input v-model="form.foodprice" ></el-input>
        </el-form-item>
        <el-form-item label="是否清真" prop="YorN">
          <el-select v-model="form.isMuslim" placeholder="请选择是否清真">
            <el-option
                v-for="item in yornList"
                :key="item.code"
                :label="item.cation"
                :value="item.cation"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应星期" prop="SupWeek">
          <el-select v-model="form.supplyDate" placeholder="请选择供应星期">
            <el-option
                v-for="item in supweekList"
                :key="item.code"
                :label="item.cation"
                :value="item.cation"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应类型" prop="SupType">
          <el-select v-model="form.supplyType" placeholder="请选择供应类型">
            <el-option
                v-for="item in suptypeList"
                :key="item.code"
                :label="item.cation"
                :value="item.cation"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" >
          <el-upload
              v-model="form.foodpic"
              class="avatar-uploader"
              action="http://localhost:8080/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>


        <el-form-item label="">
          <el-button type="primary" @click="save()">保存</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

  </div>


</template>

<script>


// import axios from "axios";
// axios.defaults.baseURL = "http://localhost:8080";
import service from "@/utils/request.js";

export default {
  name: "Update",

  data() {
    return {
      imageUrl: '',
      dialogFormVisible: false,
      visible: false,
      tableData: [],
      loading: false,
      yornList:[],
      suptypeList:[],
      supweekList:[],
      dialogImageUrl: '',
      dialogVisible: false,

      form:{
        foodId:'',
        foodname:'',
        foodtype:'',
        foodlabel:'',
        foodprice:'',
        foodpic:'',
        isMuslim:'',
        supplyDate:'',
        supplyType:'',
        foodNumber:''
      },
      total:0,
      pages:0,
      queryParam:{
        current:1,
        size:5,
        name:'',
        foodNumber:'',
        supplyDate:''
      }
    }
  },

  methods: {
    // handlerDeal(itemId,type){
    //   this.type = type;
    //   this.itemId = itemId;
    //   this.visable = true;
    // },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    init() {
      this.getConstantsItem("YorN", (list) => {
        this.yornList = list;
      })
      this.getConstantsItem("SupType", (list) => {
        this.suptypeList = list;
      })
      this.getConstantsItem("SupWeek", (list) => {
        this.supweekList = list;
      })
    },
    search() {
      this.queryParam.current = 1;
      this.queryList();
    },
    queryList() {
      this.loading = true;
      service.get("/food/page", {params: this.queryParam}).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
        console.log("tableData:", this.tableData)
        console.log("total:", this.total)
        this.pages = res.pages;
        this.loading = false
      })
    },
    toEdit(id) {
      service.get("/food/getById/" + id).then((res) => {
        this.form = res;
        this.dialogFormVisible = true;
      })
    },
    deleteById(id) {
      this.$confirm('是否删除', '确认信息').then(() => {
        service.get("/food/removeById/" + id).then((res) => {
          const success = res
          if (success) {
            this.$message.success("删除成功");
            this.queryList();
          }
        })
      });
    },
    save() {
      service.post("/food/saveOrUpdate", this.form).then((res) => {
        const success = res
        if (success) {
          this.$message.success("保存成功");
          this.dialogFormVisible = false;
          this.queryList();
        }
      })
    }
  },

  created() {
    this.queryList()
    if (this.id) {
      this.getForm();
    }
    this.init()
  },



}




</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>